import { useSelector, useDispatch } from "react-redux";
import {
  increment,
  decrement,
  updateUser,
  selectCount,
  selectUser,
} from "./index";
export default function Counter() {
  const dispatch = useDispatch();

  // let counter = useSelector(state=>state.rootCouter.counter)
  const counter = useSelector(selectCount);
  console.log("页面---counter:", counter);
  const user = useSelector(selectUser);

  // 这样可以直接解构出当前 slice所有的 state
  // 具体用哪种 看自己心情
  // const { counter } = useSelector((state) => state.rootCouter);

  return (<div>
    <h1>reduxjs/toolkit 基础用法</h1>
    <hr />
    <button onClick={() => dispatch(increment())}>+</button>
    <span>{counter}</span>
    <button onClick={() => dispatch(decrement(10))}>-</button>
    <hr />
    <h1>姓名:{user.name} --- 职业:{user.job}</h1>
    <button onClick={() => { dispatch(updateUser({ name: '无名之辈' })) }}>改名</button>
    <button onClick={() => {
      dispatch(updateUser({ job: 'LOL' }))
    }
    }>转行</button>
  </div>
  )
}
